<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/font/iconfont.css">
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        .list-box{
            width: 300px;
            box-shadow: 0 0 8px #999;
            border-radius: 8px;
            overflow: hidden;
        }
        .list-item{
            padding: 14px 18px;
            border-bottom: 1px solid #dedede;
            cursor: pointer;
            user-select: none;
        }
        .list-item:hover{
            background-color: #f2d9ab;
        }
        .list-item:active{
            background-color: #f1c16a;
        }
        .list-item:last-child{
            border-bottom: unset;
        }

        .name-box{
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
        }
        .name-box .iconfont{
            padding-right: 4px;
        }

        .card{
            width: 150px;
            height: 150px;
            box-shadow: 0 0 10px #999;
            border-radius: 6px;
            padding: 10px;
            margin: 14px;
            display: inline-block;
            vertical-align: text-top;
        }
        .card .title{
            padding-bottom: 10px;
            text-align: center;
            font-weight: bold;
            border-bottom: 1px solid #dedede;
        }
        .card .content{
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        3.作用域分发：slot 通过动态v-bind绑定回传数据，让被分发的标签可以直接加载子组件中回传的数据变量【属性绑定+数据拦截】
                        ==> 属性绑定：直接在slot标签上使用动态属性绑定语法 v-bind 完成属性绑定
                        ==> 数据拦截: slot在v-bind绑定时已经自动完成拦截操作,在被分发的组件标签上使用 v-slot="自定义变量名" 进行加载
                            v-slot="自定义变量名" 语法的自定义变量 默认取值为 {} ,用于加载 slot 回传的数据变量属性
            + vue容器作用域的详细说明: 
                - 标签定义时所在的容器就是当前标签的作用容器，此时标签的vue语法只能加载作用容器对应的vue实例仓库数据;
                - 组件定义时内部标签的容器时当前组件的作用容器，和父容器是相互隔离的;

        4.作用域解构分发：v-slot加载的作用域分发数据时，可以直接使用ES6 解构语法

        5.具名作用域分发【具名作用域解构分发】:
                        ==> 属性绑定：直接在slot标签上使用动态属性绑定语法 v-bind 完成属性绑定
                        ==> 数据拦截: slot在v-bind绑定时已经自动完成拦截操作,在分发组件对应的具名 tempate 模板标签上使用 v-slot 指令加载
                                      组件分发一旦出现具名分发，默认作用域分发不能再定义于 组件标签上
        </pre>
        <my-list :list="users" v-slot="aaa">
            <!-- {{ aaa }}
            {{ aaa.$index }} -->
            {{ aaa.row }}
        </my-list>
        <hr>
        <my-list :list="users" v-slot="scope">
            <div class="name-box">
                <div class="name">
                    <i class="iconfont icon-me"></i>
                    <!-- <span>{{ cmsg }}</span> -->
                    <!-- <span>{{ pmsg }}</span> -->
                    <!-- <span>{{ scope.$index }}</span> -->
                    <span>{{ scope.row }}</span>
                </div>
                <div class="btn">
                    <input type="button" value="删除" @click="removeItem(scope.$index)">
                </div>
            </div>
        </my-list>
        <hr>
        <my-list :list="users" v-slot="{ row,$index }">
            <div class="name-box">
                <div class="name">
                    <i class="iconfont icon-me"></i>
                    <span>{{ row }}</span>
                </div>
                <div class="btn">
                    <input type="button" value="删除" @click="removeItem($index)">
                </div>
            </div>
        </my-list>

        <hr>
        
        <!-- v-slot 可以缩写为 # -->
        <!-- <my-card v-slot="scope">
            <template v-slot:title>
                <span style="color:red">标题</span>
            </template>
            <span style="color:blue">正文-{{ msg }}</span>
        </my-card> -->
        <my-card >
            <!-- <template v-slot:title="{ msg }">
                <span style="color:red">标题-{{ msg }}</span>
            </template> -->
            <template #title="{ msg }">
                <span style="color:red">标题-{{ msg }}</span>
            </template>

            <!-- <template v-slot="scope">
                <span style="color:blue">正文-{{ scope.msg }}</span>
            </template> -->
            <!-- <template #="scope">
                <span style="color:blue">正文-{{ scope.msg }}</span>
            </template> -->
            <!-- <template v-slot:default="scope">
                <span style="color:green">正文-{{ scope.msg }}</span>
            </template> -->
            <template #default="scope">
                <span style="color:green">正文-{{ scope.msg }}</span>
            </template> 
        </my-card>

    </div>


    <script type="text/x-template" id="my-list">
        <div class="list-box">
            <div class="list-item" v-for=" (item,i) in list ">
                <slot v-bind:row="item" v-bind:$index="i"></slot>
            </div>
        </div>
    </script>

    <script type="text/x-template" id="card">
        <div class="card">
            <div class="title">
                <slot name="title" :msg="msg"></slot>
            </div>
            <div class="content">
                <slot :msg="msg"></slot>
            </div>
        </div>
    </script>

    <script src="../../assets/mockjs/mock-min.js"></script>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        const MyList = {
            template:"#my-list",
            data() {
                return {
                    cmsg: "子组件仓库变量"
                }
            },
            props:{
                list:{
                    type:Array,
                    default(){
                        return []
                    }
                }
            }
        }
        const MyCard = {
            template:"#card",
            data() {
                return {
                    msg:"组件msg"
                }
            },
        }
        createApp({
            components: {
                MyList,MyCard
            },
            data(){
                return {
                    pmsg:"父组件仓库变量",
                    users:Mock.mock({
                        "list|6":["@cname"]
                    }).list
                }
            },
            methods: {
                removeItem(i) {
                    console.log("删除元素")
                    this.users.splice(i,1)
                }
            },
        }).mount("#app");
    </script>
</body>
</html>